<template>
   <div class="detailed-line mb-2">
    <div class="detailed-line-title" :style="`width:${labelWidth}`">
     {{ title + "：" }}
    </div>
    <div class="detailed-line-content" v-if="content.length != 0">
     {{ content }}
    </div>
    <slot></slot>
   </div>
</template>

<script>
export default {
  name: "XDetail",
  props: {
    title: {
      type: String,
      default: () => "",
    },
    content: {
      type: String,
      default: () => "",
    },
    labelWidth: {
      type: String,
      default: () => "120px",
    },
  },
};
</script>

<style lang="scss" scoped>
.detailed-line {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   font-size: 13px;
   color: #999999;
   .detailed-line-title {
      width: 120px;
      color: #666666;
      font-weight: 600;
      text-align: right;
     }
}
</style>
